<template>
  <div>
    <pt-search :params="params" :config="config" label-width="110px" @search="search"/>
    <div class="base-table-wrap no-hover">
      <el-table :data="tableData.list" style="width: 100%" :show-header="false" :stripe="false">
        <el-table-column label="区域名称" min-width="120" align="center">
          <order-msg class="item" slot-scope="scope" :order="scope.row" />
        </el-table-column>
      </el-table>
      <pt-table-loading v-show="isloadingTable" />
      <pt-pagination ref="pagination" :total="tableData.total" @listeningEvent="triggerEvent" />
    </div>
  </div>
</template>
<script>
  import orderMsg from './components/orderMsg.vue'
  import { orderSelect } from '@/api/sc_order'
  export default {
    components: { orderMsg },
    data() {
      return { // 表单配置
        config: [{
          key: 'agentIds', type: 'agentList', label: '区域'
        },{
          key: 'businessname', type: 'input', label: '商家名称', placeholder: '请输入商家名称关键字'
        },{
          key: 'username', type: 'input', label: '收货人', placeholder: '请输入收货人关键字'
        },{
          key: 'ordercode', type: 'input', label: '订单号', placeholder: '请输入订单号'
        },{
          key: 'selectOrderStatus', type: 'select', label: '订单状态', option: [{
            label: '全部', id: ''
          },{
            label: '待付款', id: '1'
          },{
            label: '待发货', id: '2'
          },{
            label: '待核销', id: '3'
          },{
            label: '已删除', id: '4'
          }]
        },{ 
          key: 'page', type: 'button', group: [{
            name: '查看', type: 'primary', onClick: row => this.$router.push({
              path: '/main/sc_order/orderDetail',
              query: { oId: row.id }
            })
          },{
            name: '重置',  type: 'info', onClick: () => this.reset()
          }]
        }],
        params: {
          page: 0,
          size: 10,
          agentIds: [], // 区域
          username: '', // 用户名称
          businessname: '', // 商家名称
          ordercode: '', // 订单号
          selectOrderStatus: '' // 订单状态
        },
        isloadingTable: false,
        tableData: {}
      };
    },
    filters: {
      
    },
    methods: {
      triggerEvent(type,val) { // 分页器
        if (type === 'page') {
          this.params.page = val - 1
        } else if (type === 'size') {
          this.params.page = 0
          this.params.size = val
        }
        this.getTableList()
      },
      search() { // 搜索
        this.params.page = 0
        this.params.size = 10
        this.$refs.pagination.handleSizeChange(10)
      },
      reset() { // 重置
        this.pagination.curPage = 1
        for (const key in this.params) {
          if (key === 'page') {
            this.pagination.page = 0
          } else if (key === 'size') {
            this.pagination.size = 10
          } else if (key === 'agentIds') {
            this.params[key] = []
          } else {
            this.params[key] = ''
          }
        }
        this.getTableList()
      },
      handleClick(id) { // 查看/修改订单操作
        this.dialogTableVisible = !this.dialogTableVisible;
        this.diyLoading = true
        api.orderInfo({ id }).then(res => {
          this.diyLoading = false
          this.curOrderlist = res.data
        }).catch(() => {
          this.diyLoading = false
        })
      },
      getTableList() { // 获取订单数据
        const params = { ...this.params }
        this.isloadingTable = false
        orderSelect(params).then(res => {
          if (res.success) {
            this.tableData = res.data
          }
        }).finally(() => { this.isloadingTable = false })
      }
    },
    mounted() {
      this.getTableList()
    }
  }
</script>
<style lang="scss" scoped>
  
</style>
<style>
  .base-table-wrap.no-hover{
    min-width: 900px;
  }
  .base-table-wrap.no-hover .el-table tbody tr:hover>td { 
    background-color:#fff!important;
  }
  .base-table-wrap.no-hover .el-table td{
    border: none;
  }
  .base-table-wrap.no-hover .el-table::before{
    background-color: #fff!important;
  }
</style>
